<template>
	<view>
		<view class='UCenter-bg'>
			<navigator url="personinfo/personinfo">
				<image class='headImage' src="../../static/demo/userpic/11.jpg" mode="widthFix" lazy-load></image>
				<view class='text-xl cuIcon-myfill' style="font-size: 36upx; margin-left: 24upx;" >
				{{userInfo.nickName}}
				</view>
			</navigator>
			<image src='../../static/images/wave.gif' mode='scaleToFill' class='gif-wave'></image>
		</view>
		<view class="cu-list menu sm-border card-menu padding-top-xs">
			<navigator url="siteSet/site-list" class="cu-item arrow">
				<view class="content">
					<text class="cuIcon-list text-lg"/>
					<text class="text-left">站点配置</text>
				</view>				
			</navigator>
			<navigator url="opCount/operatorOrder" class="cu-item arrow">
				<view class="content">
					<text class="cuIcon-friend text-lg"/>
					<text class="text-left">运维统计</text>
				</view>				
			</navigator>
			<navigator url="personCount/travelCondition" class="cu-item arrow">
				<view class="content">
					<text class="cuIcon-friend text-lg"/>
					<text class="text-left">出行统计</text>
				</view>				
			</navigator>
			<navigator v-show="hasAuthority('appPersonCenterGroup')" url="partner/PerOperatorInfo" class="cu-item arrow">
				<view class="content">
					<text class="cuIcon-friend text-lg"/>
					<text class="text-left">成员运维概况</text>
				</view>				
			</navigator>
			
		</view>
		<view class="cu-list menu sm-border card-menu">
			<view class="cu-item">
				<view class="content">
					<text class="cuIcon-apps text-lg"/>
					<text class="text-left">当前版本</text>
				</view>
				<view class="action">
					<text>v{{version}}</text>
				</view>
			</view>
			
			<navigator url="about_us" class="cu-item arrow">
				<view class="content">
					<text class="cuIcon-info text-lg"/>
					<text class="text-left">关于我们</text>
				</view>				
			</navigator>
			
		</view>
	</view>
</template>

<script>
	import Util from '@/utils/util.js';
	export default {
		components: {},
		data() {
			return {
				version:'1.0.0',
				src: '', // 二维码生成后的图片地址或base64
				foreground: '#000000', // 前景色
				pdground: '#309286', // 角标色
				background:'#ffffff',
				userInfo:{},
			}
		},
		onLoad() {
			this.userInfo = Util.getUserInfo();
			},
		methods: {
			
		}
	}
</script>

<style>
	.UCenter-bg {
	  /* background-image: url('https://api.szyashu.com/static/index.jpg'); */
	  /* background-size: cover; */
	  background-color: #00c600;
	  height: 400rpx;
	  display: flex;
	  justify-content: center;
	  padding-top: 40rpx;
	  overflow: hidden;
	  position: relative;
	  flex-direction: column;
	  align-items: center;
	  color: #fff;
	  font-weight: 300;
	  text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
	}
	
	.UCenter-bg text {
	  opacity: 0.8;
	}
	
	.UCenter-bg image {
	  width: 200rpx;
	  height: 200rpx;
	}
	
	.UCenter-bg .gif-wave{
	  position: absolute;
	  width: 100%;
	  bottom: 0;
	  left: 0;
	  z-index: 99;
	  mix-blend-mode: screen;  
	  height: 100rpx;   
	}
	.headImage{
		flex-shrink: 0;
		width: 100upx;
		height: 100upx;
		border-radius: 100%;
		margin-right: 15upx;
	}
</style>